<template>
    <!-- element-ui组件提供的面包屑 -->
    <el-breadcrumb class="app-breadcrumb" separator="/">
        <transition-group>
            <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
                <!-- 不能跳转:路由没有配置重定向或当前项已经是最后一项 -->
                <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
                    item.meta.title }}</span>
                <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
            </el-breadcrumb-item>
        </transition-group>
    </el-breadcrumb>
</template>

<script>
import pathToRegexp from "path-to-regexp"
export default {
    name: "BreadcrumbView",
    data() {
        return {
            levelList: []
        }
    },
    watch: {
        //观察路由变化，当路由变化时，重新获取面包屑的链接
        $route: {
            handler() {
                this.getBreadcrumb()
            },
            immediate: true
        }
    },
    methods: {
        getBreadcrumb() {
            console.log(this.$route.matched);
            //面包屑仅显示包含meta.title且item.meta.breadcrumb不为false的路由           
            // /about/bla
            // matched:['/','/about','/about/bla']            
            let matched = this.$route.matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
            //根路由
            const first = matched[0];
            // 根匹配只要不是home，就作为home下一级
            if (!this.isHome(first)) {
                // matched = [{ path: '/', meta: { title: '首页' } }].concat(matched)
                matched = [{ redirect: '/home', meta: { title: '首页' } }].concat(matched)

            }
            //处理完指定到levelList
            this.levelList = matched;
        },
        isHome(route) {
            const name = route && route.name;
            if (!name) {
                return false;
            }
            return name.trim().toLocaleLowerCase() === 'home'.toLocaleLowerCase();
        },

        pathCompile(path) {
            // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
            const { params } = this.$route
            var toPath = pathToRegexp.compile(path)
            return toPath(params)
        },
        handleLink(item) {
            const { redirect, path } = item
            if (redirect) {
                this.$router.push(redirect)
                return;
            }
            //编译路径，避免存在动态路由参数
            this.$router.push(this.pathCompile(path))
        }
    }
};
</script>

<style scoped>
.app-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 50px;
    margin-left: 8px;
}

.app-breadcrumb.el-breadcrumb .no-redirect {
    color: #97a8be;
    cursor: text;
}

.breadcrumb-enter-active,
.breadcrumb-leave-active {
    transition: all .5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
    opacity: 0;
    transform: translateX(20px);
}

.breadcrumb-move {
    transition: all .5s;
}

.breadcrumb-leave-active {
    position: absolute;
}
</style>